<template lang="pug">
  div
    app-header(fixed,title="选择城市",v-if="!$helper.isWechat")
    .main-wrapper(ref="mainWrapper",:style="{top: $helper.isWechat ? '0' : '0.84rem'}")
      ul.wrapper-content
        li(v-for="(item,index) in lists",:key="index",@click="itemClickHandler(item.code)") {{item.name}}
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { Button, Toast } from 'mint-ui'
import Header from 'components/Header'
import BScroll from 'better-scroll'
export default {
  computed: {
    ...mapGetters({
      profile: 'getProfile'
    })
  },
  components: {
    'mt-button': Button,
    'app-header': Header
  },
  data () {
    return {
      mainScroll: null,
      scrolling: false,
      lists: []
    }
  },
  async created () {
    await this.loadData()
  },
  methods: {
    ...mapActions({
      reloadProfile: 'reloadProfile'
    }),
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.$nextTick(() => {
          this.mainScroll.refresh()
        })
      }
    },
    async loadData () {
      let toast = Toast('正在加载..')
      let result = await this.$rpc.invoke('region_lists', []).complete()
      if (result.code) {
        return Toast(result.message)
      }
      this.lists = result.data
      this._initScroll()
      toast.close()
    },
    async itemClickHandler (code) {
      await this.$rpc.invoke('region_switch', [code]).complete()
      await this.reloadProfile()
      this.$router.push({name: 'home:index'})
    }
  }
}
</script>
<style lang="stylus" scoped>
  .main-wrapper
    position: absolute
    bottom: 1.2rem
    right: 0
    left: 0
    padding: 0
    ul
      list-style: none
      li
        border-bottom: 1px solid #cecece
        line-height: 1.3rem
        text-indent: 1rem
        cursor: pointer
</style>
